<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站底部导航样式</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      margin: 0;
      padding: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    .content {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      background-color: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      text-align: center;
    }
    
    /* 底部导航通用样式 */
    .bottom-nav {
      display: flex;
      height: 56px;
      border-top: 1px solid #eee;
      background-color: white;
      z-index: 100;
    }
    
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #999;
      text-decoration: none;
      font-size: 10px;
      transition: all 0.2s ease;
    }
    
    .nav-item.active {
      color: #4263EB;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 4px;
    }
    
    /* 风格切换器 */
    .style-switcher {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 1001;
      background: white;
      border-radius: 20px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    
    .style-btn {
      border: none;
      background: none;
      padding: 6px 12px;
      cursor: pointer;
      font-size: 12px;
    }
    
    .style-btn.active {
      background-color: #4263EB;
      color: white;
    }
    
    /* 风格1：经典图标文字式 */
    #style1 .bottom-nav {
      box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    }
    
    #style1 .nav-item.active {
      position: relative;
    }
    
    #style1 .nav-item.active::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #4263EB;
    }
    
    /* 风格2：凸起图标式 */
    #style2 .bottom-nav {
      padding: 0 16px;
      border-top: none;
      box-shadow: 0 -2px 15px rgba(0,0,0,0.05);
    }
    
    #style2 .nav-item {
      position: relative;
      padding-top: 8px;
    }
    
    #style2 .nav-item.middle {
      margin-top: -20px;
    }
    
    #style2 .nav-item.middle .nav-icon {
      width: 52px;
      height: 52px;
      background-color: #4263EB;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      margin-bottom: 0;
      box-shadow: 0 4px 12px rgba(66, 99, 235, 0.4);
    }
    
    /* 风格3：深色模式 */
    #style3 .content {
      background-color: #121212;
      color: #aaa;
    }
    
    #style3 .bottom-nav {
      background-color: #1e1e1e;
      border-top-color: #333;
    }
    
    #style3 .nav-item {
      color: #888;
    }
    
    #style3 .nav-item.active {
      color: #58a9ff;
    }
    
    /* 风格4：简约标签式 */
    #style4 .bottom-nav {
      height: 48px;
      border-top: none;
      background-color: white;
    }
    
    #style4 .nav-item {
      font-size: 14px;
      font-weight: 500;
      padding: 0 8px;
    }
    
    #style4 .nav-icon {
      display: none;
    }
    
    #style4 .nav-item.active {
      color: #4263EB;
      position: relative;
    }
    
    #style4 .nav-item.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: #4263EB;
      border-radius: 3px 3px 0 0;
    }
    
    /* 风格5：图标徽章式 */
    #style5 .bottom-nav {
      background-color: white;
      border-top: 1px solid #f0f0f0;
    }
    
    #style5 .nav-item {
      position: relative;
    }
    
    #style5 .badge {
      position: absolute;
      top: 8px;
      right: 20%;
      background-color: #ff3b30;
      color: white;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: normal;
    }
    
    #style5 .badge.dot {
      width: 8px;
      height: 8px;
      background-color: #ff3b30;
    }
  </style>
</head>
<body>
  <!-- 风格切换器 -->
  <div class="style-switcher">
    <button class="style-btn active" data-style="style1">风格1</button>
    <button class="style-btn" data-style="style2">风格2</button>
    <button class="style-btn" data-style="style3">风格3</button>
    <button class="style-btn" data-style="style4">风格4</button>
    <button class="style-btn" data-style="style5">风格5</button>
  </div>
  
  <!-- 风格1：经典图标文字式 -->
  <div id="style1" class="page-style active">
    <div class="content">
      <div>
        <h3>经典图标文字式底部导航</h3>
        <p>点击底部导航切换页面</p>
      </div>
    </div>
    
    <nav class="bottom-nav">
      <a href="#" class="nav-item active">
        <i class="fa fa-home nav-icon"></i>
        <span>首页</span>
      </a>
      <a href="#" class="nav-item">
        <i class="fa fa-compass nav-icon"></i>
        <span>发现</span>
      </a>
      <a href="#" class="nav-item">
        <i class="fa fa-bell nav-icon"></i>
        <span>通知</span>
      </a>
      <a href="#" class="nav-item">
        <i class="fa fa-user nav-icon"></i>
        <span>我的</span>
      </a>
    </nav>
  </div>
  
  <!-- 风格2：凸起图标式 -->
  <div id="style2" class="page-style">
    <div class="content">
      <div>
        <h3>凸起图标式底部导航</h3>
        <p>中间按钮凸起设计，适合突出核心功能</p>
      </div>
    </div>
    
    <nav class="bottom-nav">
      <a href="#" class="nav-item active">
        <i class="fa fa-home nav-icon"></i>
        <span>首页</span>
      </a>
      <a href="#" class="nav-item">
        <i class="fa fa-search nav-icon"></i>
        <span>搜索</span>
      </a>
      <a href="#" class="nav-item middle">
        <i class="fa fa-plus nav-icon"></i>
      </a>
      <a href="#" class="nav-item">
        <i class="fa fa-bell nav-icon"></i>
        <span>通知</span>
      </a>
      <a href="#" class="nav-item">
        <i class="fa fa-user nav-icon"></i>
        <span>我的</span>
      </a>
    </nav>
  </div>
  
  <!-- 风格3：深色模式 -->
  <div id="style3" class="page-style">
    <div class="content">
      <div>
        <h3>深色模式底部导航</h3>
        <p>深色背景设计，适合夜间使用</p>
      </div>
    </div>
    
    <nav class="bottom-nav">
      <a href="#" class="nav-item active">
        <i class="fa fa-home nav-icon"></i>
        <span>首页</span>
      </a>
      <a href="#" class="nav-item">
        <i class="fa fa-compass nav-icon"></i>
        <span>探索</span>
      </a>
      <a href="#" class="nav-item">
        <i class="fa fa-bookmark nav-icon"></i>
        <span>收藏</span>
      </a>
      <a href="#" class="nav-item">
        <i class="fa fa-user nav-icon"></i>
        <span>个人</span>
      </a>
    </nav>
  </div>
  
  <!-- 风格4：简约标签式 -->
  <div id="style4" class="page-style">
    <div class="content">
      <div>
        <h3>简约标签式底部导航</h3>
        <p>纯文字标签设计，简洁明了</p>
      </div>
    </div>
    
    <nav class="bottom-nav">
      <a href="#" class="nav-item active">
        <i class="fa fa-home nav-icon"></i>
        <span>首页</span>
      </a>
      <a href="#" class="nav-item">
        <i class="fa fa-compass nav-icon"></i>
        <span>发现</span>
      </a>
      <a href="#" class="nav-item">
        <i class="fa fa-bell nav-icon"></i>
        <span>消息</span>
      </a>
      <a href="#" class="nav-item">
        <i class="fa fa-user nav-icon"></i>
        <span>我的</span>
      </a>
    </nav>
  </div>
  
  <!-- 风格5：图标徽章式 -->
  <div id="style5" class="page-style">
    <div class="content">
      <div>
        <h3>图标徽章式底部导航</h3>
        <p>带有消息提示徽章，适合社交互动</p>
      </div>
    </div>
    
    <nav class="bottom-nav">
      <a href="#" class="nav-item active">
        <i class="fa fa-home nav-icon"></i>
        <span>首页</span>
      </a>
      <a href="#" class="nav-item">
        <i class="fa fa-compass nav-icon"></i>
        <span>发现</span>
        <span class="badge dot"></span>
      </a>
      <a href="#" class="nav-item">
        <i class="fa fa-bell nav-icon"></i>
        <span>通知</span>
        <span class="badge">3</span>
      </a>
      <a href="#" class="nav-item">
        <i class="fa fa-user nav-icon"></i>
        <span>我的</span>
      </a>
    </nav>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 风格切换功能
    document.querySelectorAll('.style-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        // 更新按钮状态
        document.querySelectorAll('.style-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // 显示对应的风格页面
        const styleId = this.getAttribute('data-style');
        document.querySelectorAll('.page-style').forEach(style => {
          style.style.display = 'none';
        });
        document.getElementById(styleId).style.display = 'flex';
        document.getElementById(styleId).style.flexDirection = 'column';
      });
    });
    
    // 导航项点击事件
    document.querySelectorAll('.nav-item').forEach(item => {
      item.addEventListener('click', function(e) {
        e.preventDefault();
        
        // 移除同组中其他项的active类
        const siblings = this.parentElement.querySelectorAll('.nav-item');
        siblings.forEach(sib => sib.classList.remove('active'));
        
        // 为当前点击项添加active类
        this.classList.add('active');
        
        // 模拟页面切换提示
        const pageName = this.querySelector('span').textContent;
        const contentArea = this.closest('.page-style').querySelector('.content p');
        contentArea.textContent = `已切换到${pageName}页面`;
      });
    });
    
    // 初始化 - 隐藏所有风格，只显示默认风格
    document.querySelectorAll('.page-style').forEach((style, index) => {
      if (index !== 0) {
        style.style.display = 'none';
      } else {
        style.style.display = 'flex';
        style.style.flexDirection = 'column';
      }
    });
  </script>
</body>
</html>
